<template>
	<main class="divide">
		<el-tabs type="border-card" >
		  	<el-tab-pane label="分组情况">
		  		<el-card class="box-card" v-for="(item,index) in groupList">
					<div slot="header" class="clearfix">
					    <span>{{item.gname}}</span>
					    <!--<el-button style="float: right; padding: 3px 0" type="text" @click="changeGroupMenber">编辑</el-button>-->
					</div>
					<el-table :data="tableData" height="250" border >
					    <el-table-column prop="uname" label="姓名" width="180"></el-table-column>
					    <el-table-column prop="usex" label="性别" width="180"></el-table-column>
					    <el-table-column prop="sid" label="专业方向" width="180"></el-table-column>
					    <el-table-column  prop="uphone" label="联系电话"></el-table-column>
					    <el-table-column  prop="gname" label="隶属小组"></el-table-column>
					    <el-table-column  prop="utype" label="组内职务"></el-table-column>
					</el-table>
				</el-card>
		  	</el-tab-pane>
		  	<el-tab-pane label="本组信息">
		  		<div class="groupMenBox">
		  			<div slot="header" class="clearfix">
					    <h3 style="opacity: 0.5;">小组成员信息</h3>
						<el-divider></el-divider>
					    <!--<el-button style="float: right; padding: 3px 0" type="text" @click="changeGroupMenber">编辑</el-button>-->
					</div>
					<el-table :data="groupMem" stripe style="width: 100%;">
					    <el-table-column prop="uname" label="姓名" width="100"></el-table-column>
					    <el-table-column prop="usex" label="性别" width="100"></el-table-column>
					    <el-table-column prop="sid" label="专业方向"width="130" ></el-table-column>
					    <el-table-column  prop="uphone" label="联系电话"width="180"></el-table-column>
					    <el-table-column  prop="gname" label="隶属小组"width="130"></el-table-column>
					    <el-table-column  prop="utype" label="组内职务"width="130"></el-table-column>
					</el-table>
		  		</div>
		  		<div class="groupMessgeBox">
		  			<p class="gflo">
		  				<i class="el-icon-s-order">
		  					<h3 class="groupCard">查看小组名片</h3>
		  				</i>
			  			
		  			</p>
		  		</div>

		  		<!--<div class="groupMessge">
		  			<el-card class="box-card">
					  <div slot="header" class="clearfix">
					    <span>小组名片</span>
					    <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
					  </div>
					    <div v-for="(item,index) in groupMsg" class="text item">
						    <span>组名：</span><span>{{item.gname}}</span>
						    <el-divider></el-divider>
						    <span>小组口号：</span><span>{{item.gslogan}}</span>
						    <el-divider></el-divider>
						    <span>小组：</span><span>{{item.grank}}</span>
					    </div>
					</el-card>
		  		</div>-->
		  	</el-tab-pane>
		</el-tabs>
	</main>
</template>

<script>
	export default {
    data() {
    	return {
    		groupList:[
	    		{
	    			gname:"我是组名1",
	    		},
	    		{
	    			gname:"我是组名2",
	    		},
	    		{
	    			gname:"我是组名3",
	    		},
	    		{
	    			gname:"我是组名4",
	    		},
	    		{
	    			gname:"我是组名5",
	    		}
    		],
    		tableData: [
    			{
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:2,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组长',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:3,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:4,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:5,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        },
		        {
    				gid:1,
    				uid:6,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		        }
		        
		        
		    ],
		    groupMsg:[
			    {
			    	gname:"我是小组名字",
			    	gslogan:"我是小组口号",
			    	grank:"我是小组排名",
			    }
		    ],
		    groupMem: [
    			{
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      },
		      {
    				uid:1,
    				gid:1,
		          	usex: '女',
		         	uname: '王小虎',
		         	utype:'组员',
		          	uphone: '15767390000',
		          	sid:'前端开发',
		          	gname:'小组名字'
		      }
    		]
    	}
    },
    methods:{
//  	changeGroupMenber(){
//  		alert('我要跳转了')
//  	}
    }
   }
</script>

<style>
	.divide{
		width:88%;
	}
	.divide .text {
    	font-size: 14px;
	}
	
	.divide .item {
	    margin-bottom: 18px;
	}
	
	.divide .clearfix:before,
	.divide .clearfix:after {
	    display: table;
	    content: "";
	}
	.divide .clearfix:after {
	    clear: both
	}
	.divide .groupMessge .text {
	    font-size: 14px;
	  }
    .divide .groupMessge .item {
    	margin-bottom: 18px;
    }
    .divide .groupMessge .clearfix:before,
    .divide .groupMessge .clearfix:after {
    	display: table;
    	content: "";
    }
    .divide .groupMessge .clearfix:after {
   		clear: both
    }
    .divide .groupMessge .box-card {
    	width: 100%;
    }
    .divide .groupMessge{
    	margin: 50px auto;
    	width: 35%;
    	box-shadow: 5px 5px 5px #888888;
    }
    .groupMenBox{
    	float: right;
    	padding: 20px;
    	margin-right: 70px;
    }
    .groupMenTitle{
    	display: inline-block;
    	font-size: 18px;
    	font-weight: 600;
    }
    .divide .groupMessgeBox{
    	float: left;
    	opacity: 0.6;
    }
    .divide .groupMessgeBox i{
    	display: block;
    	font-size: 120px;
    	transform: translate(85px,100%);
    }
    .divide .groupMessgeBox i h3{
    	margin-top: 40px;
    	font-size: 20px;
    }
    /*.divide .groupMessgeBox .groupCard{
    	transform: translate(90px,230px);
    }*/
    .divide .groupMessgeBox .gflo{
    	position: fixed;
    	/*top: 20px;*/
    }
</style>